<template>
  <div class="sz">
    <!--标题-->
    <div class="sz1">
      <img @click="returns()" src="../../../assets/2.svg" />
      <h3>设置</h3>
      <div></div>
    </div>
    <!--内容-->
    <div class="sz2">
      <ul>
        <li>
          <router-link to="/zil">
          <span class="text">我的资料</span>
          <span class="text1"><img src="../../../assets/3.svg" /></span>
          </router-link>
        </li>
        <li class="li">
          <span class="text">通知设置</span>
          <span class="text1"><img src="../../../assets/3.svg" /></span>
        </li>
        <li>
          <span class="text">位置设置</span>
          <span class="text1"><img src="../../../assets/3.svg" /></span>
        </li>
        <li>
          <span class="text">修改密码</span>
          <span class="text1"><img src="../../../assets/3.svg" /></span>
        </li>
        <li class="li">
          <span class="text">意见反馈</span>
          <span class="text1"><img src="../../../assets/3.svg" /></span>
        </li>
        <li>
          <span class="text">关于我们</span>
          <span class="text1"><img src="../../../assets/3.svg" /></span>
        </li>
        <li class="li1">
          <span>退出登录</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "shez",
  methods: {
    returns(){
      this.$router.back()
    }
  }
}
</script>

<style>
.sz {
  height: 100vh;
  text-align: center;
}
/*标题*/
.sz1 {
  height: 55px;
  line-height: 55px;
  display: flex;
  justify-content: flex-start;
}
.sz1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}
.sz1 h3 {
  font-weight: normal;
  flex: 6;
}
.sz1 div {
  flex: 1;
}
/*内容*/
.sz2 ul {
  list-style: none;
}
.sz2 ul li {
  height: 60px;
  line-height: 60px;
  font-size: 1.2rem;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.sz2 ul li a {
  text-decoration: none;
  color: #000;
}
.sz2 .text {
  float: left;
  margin-left: 20px;
}
.sz2 .text1 {
  float: right;
  margin-right: 40px;
}
.text1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
}
.sz2 ul .li{
  margin-top: 20px;
}
.sz2 ul .li1 {
  margin-top: 100px;
}
.sz2 ul .li1 span {
  align-content: center;
}
</style>
